import { ImageResponse } from 'next/og';
import { api, safe } from '@/lib/api';
import { fmtDate, fmtInt } from '@/lib/format';
import { OBJECT_TYPE_LABELS, ORBIT_CLASS_COLORS, STATUS_COLORS } from '@/lib/site';

export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';
export const alt = 'SatelliteIndex — satellite orbit card';

// OG renderer cannot resolve CSS variables: mirror the hex tokens from globals.css.
const HEX: Record<string, string> = {
  'var(--active)': '#38d17f',
  'var(--inactive)': '#7c869e',
  'var(--ink-3)': '#6b7694',
  'var(--warn)': '#f5a524',
  'var(--danger)': '#ff5c6c',
  'var(--accent-2)': '#8f7dff',
  'var(--leo)': '#38d3ff',
  'var(--meo)': '#8f7dff',
  'var(--geo)': '#f5b544',
  'var(--heo)': '#ff7ab6',
  'var(--other)': '#7c869e',
};
const hex = (v: string | undefined, fallback: string) => (v ? HEX[v] ?? fallback : fallback);

export default async function Image({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const res = await safe(api.satellite(slug));
  const d = res?.data ?? null;
  const statusColor = hex(STATUS_COLORS[d?.status ?? 'UNKNOWN'], '#7c869e');
  const orbitColor = hex(ORBIT_CLASS_COLORS[d?.orbit_class ?? 'UNKNOWN'], '#7c869e');
  const live = d?.live && d.live.error == null ? d.live : null;
  const alt = live ? `${fmtInt(live.altitude_km)} km` : d?.orbital_state ? `${fmtInt(d.orbital_state.perigee_km)}–${fmtInt(d.orbital_state.apogee_km)} km` : '—';

  return new ImageResponse(
    (
      <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: 64, background: 'linear-gradient(135deg, #0b1020 0%, #060912 70%)', color: '#eaf0ff', fontFamily: 'sans-serif' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ width: 18, height: 18, borderRadius: 999, background: '#38d3ff', boxShadow: '0 0 0 6px rgba(56,211,255,0.18)' }} />
          <div style={{ fontSize: 26, letterSpacing: 4, textTransform: 'uppercase', color: '#a3aec8', fontWeight: 600 }}>SatelliteIndex</div>
          {d && (
            <div style={{ marginLeft: 'auto', fontSize: 24, color: '#6b7694', letterSpacing: 2 }}>{`NORAD ${d.norad_id ?? '—'}${d.cospar_id ? ` · ${d.cospar_id}` : ''}`}</div>
          )}
        </div>

        {d ? (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            <div style={{ fontSize: d.name.length > 22 ? 64 : 88, fontWeight: 700, letterSpacing: -3, lineHeight: 1 }}>{d.name}</div>
            <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 18px', borderRadius: 999, border: `2px solid ${statusColor}`, color: statusColor, fontSize: 26 }}>
                <div style={{ width: 12, height: 12, borderRadius: 999, background: statusColor }} />
                {d.status.charAt(0) + d.status.slice(1).toLowerCase()}
              </div>
              <div style={{ padding: '8px 18px', borderRadius: 8, background: 'rgba(160,180,230,0.10)', color: '#a3aec8', fontSize: 26 }}>{OBJECT_TYPE_LABELS[d.object_type] ?? d.object_type}</div>
              {d.orbit_class && <div style={{ padding: '8px 18px', borderRadius: 8, background: 'rgba(160,180,230,0.10)', color: orbitColor, fontSize: 26, fontWeight: 700 }}>{d.orbit_class}</div>}
              {d.operator_name && <div style={{ fontSize: 26, color: '#a3aec8' }}>{`· ${d.operator_name}`}</div>}
            </div>
          </div>
        ) : (
          <div style={{ fontSize: 72, fontWeight: 700 }}>Object not catalogued</div>
        )}

        <div style={{ display: 'flex', gap: 56, borderTop: '1px solid rgba(160,180,230,0.2)', paddingTop: 28 }}>
          {[
            ['Altitude', alt],
            ['Inclination', d?.orbital_state ? `${d.orbital_state.inclination.toFixed(2)}°` : d?.inclination_deg != null ? `${Number(d.inclination_deg).toFixed(2)}°` : '—'],
            ['Period', d?.orbital_state?.period_minutes ? `${d.orbital_state.period_minutes.toFixed(1)} min` : '—'],
            ['Launched', fmtDate(d?.launch_date)],
          ].map(([k, v]) => (
            <div key={k} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              <div style={{ fontSize: 20, letterSpacing: 3, textTransform: 'uppercase', color: '#6b7694' }}>{k}</div>
              <div style={{ fontSize: 40, fontWeight: 600, color: '#eaf0ff' }}>{v}</div>
            </div>
          ))}
        </div>
      </div>
    ),
    { ...size },
  );
}